<template>
	<view class="article-list flex-c" :class="{'mt20': marginTop, 'border': !marginBottom}">
		<view class="article-list-item flex-c" :class="{'mb20': marginBottom, 'radius': radius}" v-for="(article, index) in list" :key="index" @tap="goDetail(article, index)">
			<!-- 浏览信息 -->
			<view class="read-info thinborder text-secondary" v-if="type == 'readlog'">
				<text>浏览时间：</text>
				<uni-dateformat class="date" :date="article.readTime" format="yyyy.MM.dd hh:mm:ss"></uni-dateformat>
			</view>
			<!-- 专家信息 -->
			<view class="author flex-r ac" v-if="showHead">
				<view class="author-avatar flex-c ac" @tap.stop="$CHS.goExpertHome(article.expertId || article.userId, article.userType || 'expert')">
					<lazy-image class="avatar border-round" :src="article.avatar+'?imageView2/1/w/100/h/100/q/50'" :type="article.userType || 'user'" fit="cover"></lazy-image>
					<image class="label-icon" :src="require('@/public/images/bar/'+article.roleType+'.png')" mode="aspectFit" v-if="article.roleType && article.roleType != 'by'&&type!='ballbar'"></image>
				</view>
				<view class="author-info flex-c">
					<view class="flex-r ac jsb">
						<view class="left flex-r ac">
							<text class="text-small">{{article.nickname}}</text>
							<text class="tag-red ml20" v-if="article.hotContineTxt && type!='ballbar'">{{article.hotContineTxt}}</text>
							<text class="tag-gold ml20" v-else-if="article.hitResultTxt && type != 'ballbar'">{{article.hitResultTxt}}</text>
							<image class="hot-icon" v-if="type == 'ballbar' && index < 3 && showHot" :src="require('@/public/images/bar/rt'+(index+1)+'.png')" mode="aspectFit"></image>
						</view>
						<view class="right text-info flex-r ac">
							<!-- <text class="color-red">{{article.virtualReadNum}}</text>
							<text class="color-grey">人{{article.payBeanValue ? '查看' : '浏览'}}</text> -->
							<template v-if="article.payBeanValue ">
								<text class="color-blue ml20" v-if="article.finish == 1">查看</text>
								<template v-else>
									<text class="price color-red" v-if="article.label == '1' && article.avgBeanCard">优享价：{{article.avgBeanCard}}</text>
									<text class="price color-red" v-else-if="article.label == '2' && article.benefitPrice">福利价：{{article.benefitPrice}}</text>
									<text class="price color-red" v-else>{{article.payBeanValue}}</text>
									<image class="bean-icon" src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
								</template>
							</template>
						</view>
					</view>
					<view class="time text-info color-grey flex-r ac jsb">
						<view class="left">
							<uni-dateformat :date="article.displayTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
							{{new Date() - new Date(article.displayTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
						</view>
						<text class="color-red ml20" v-if="article.state == 1 &&article.finish == 2 ">不中返还</text>
						<text class="color-red ml20" v-if="article.state == 3 &&article.finish == 2 ">不中补单</text>
					</view>
				</view>
			</view>
			<!-- 标题信息 -->
			<view class="title-info flex-r ac">
				<view class="article-title">
					<!-- <template v-if="type == 'ballbar'">
						<text class="type text-mini color-white bg-bule" v-if="article.type == 1 || article.type == 99">方案</text>
						<text class="type text-mini color-white bg-yellow" v-if="article.type == 2">晒单</text>
						<text class="type text-mini color-white bg-red" v-if="article.type == 6 || article.type == 7">讨论帖</text>
					</template> -->
					<template v-if="type == 'barhome' && article.top === 1">
						<text class="top text-mini color-white">置顶</text>
					</template>
					<image v-if="article.articleType=='2' && showSP " class="spfa" src="@/public/images/index/spfa.png" ></image> 
					<text class="text-primary text-post" v-if="type==='ballbar' && article.type == 7 && article.discussOption">[投票帖]</text>
					<text class="text-primary text-post" v-if="type==='ballbar' && article.type == 6">[话题帖]</text>
					<text class="text-primary text-post" v-if="type==='ballbar' && article.type == 2">[晒单]</text>
					<text class="text-primary" :class="{'text_shengl':type == 'barhome','text-title':type=='barhome'||type=='readlog'}">{{article.title}}</text>
				</view>
				<view class="card-free" v-if="article.label != '0' && article.finish != 1 && !article.result">
					<image class="inheritwh" src="@/public/images/public/yxmd.png" mode="aspectFit" v-if="article.label == '1'"></image>
					<image class="inheritwh" src="@/public/images/public/flfa.png" mode="aspectFit" v-else-if="article.label == '2'"></image>
				</view>
			</view>
			<!-- 比赛信息 -->
			<template v-if="article.type == 1 || article.type == 99">
				<view class="match-info text-mini flex-r ac" v-for="(match, index) in article.matchInfoList" :key="index">
					<text class="color-blue">{{match.lotteryType == 201 ? '竞篮' : (match.lotteryType == 301 ? '北单' : '竞足')}}</text>
					<text class="color-grey" space="ensp" v-if="match.sportId == 1 || match.lotteryType !== 201">
						{{match.matchTime.replace(/-/ig, '/').substr(5, 11) + ' ' + match.competitionName + ' ' + match.homeNameZh + ' VS ' +  match.awayNameZh}}
					</text>
					<text class="color-grey" space="ensp" v-else>
						{{match.matchTime.replace(/-/ig, '/').substr(5, 11) + ' '  + match.competitionName + ' ' + match.awayNameZh + ' VS ' +  match.homeNameZh}}
					</text>
				</view>
			</template>
			<!-- 大神解读视频料 -->
			<template v-if="article.videoUrl&&type=='barhome'">
				<VideoUrl :videoUrl="article.videoUrl" :imageUrl="article.imageUrl" :isFullWidth="isFullWidth"></VideoUrl>
			</template>
			<!-- 免费方案视频料 -->
			<template v-if="article.freeVideoUrl">
				<VideoUrl :videoUrl="article.freeVideoUrl" :imageUrl="article.imageUrl" :isFullWidth="isFullWidth"></VideoUrl>
			</template>
			<template v-if="article.type==2&&article.imageUrl&&(type=='barhome'||type=='experthome')">
				<view class="article-image flex-r" :class="{'full-width': isFullWidth, 'big-image': article.imageUrl.split(',').length == 1}">
					<lazy-image :src="article.imageUrl.split(',')[0]+'?imageView2/1/w/710/h/400/q/50'" fit="cover" v-if="article.imageUrl.split(',').length == 1"></lazy-image>
					<template v-else>
						<lazy-image v-for="(img, index) in article.imageUrl.split(',').slice(0, 3)" :src="img+'?imageView2/1/w/226/h/170/q/50'" :key="index" fit="cover"></lazy-image>
					</template>
				</view>
			</template>
			<!-- 优先展示视频料 -->
			<template v-if="type=='ballbar'||type=='readlog'">
				<VideoUrl :videoUrl="article.videoUrl" :imageUrl="article.imageUrl" :isFullWidth="isFullWidth" :type="type"></VideoUrl>
			</template>
			<!-- 投票信息 -->
			<view class="vote-info" v-if="article.type == 7 && article.discussOption">
				<view class="vote-other flex-c ac">
					<template v-for="(vote, indexs) in article.discussOption">
						<view class="vote-item flex-r ac jsb text-small" :class="article.discussOption.every(vote => !vote.voteFlag)?'active':vote.voteFlag?'active':'noActive'" :key="indexs" @tap.stop="voteSubmit(article, indexs)">
							<view class="progress" :style="'width:' + (article.participateNum ? vote.voteNum / article.participateNum * 100 : 0) + '%;'"></view>
							<text class="text-hidden">{{vote.title}}</text>
							<text>{{vote.voteNum}}</text>
						</view>
					</template>
				</view>
			</view>
			<!-- 参与人数 -->
			<view class="join-info text-small flex-r ac" v-if="article.type == 6 && article.participateNum">
				<view class="join-user flex-r ac">
					<lazy-image
						v-for="(avatar, index) in article.participateAvatar.slice(0, 5)"
						:key="index" 
						class="user-avatar border-round" 
						:style="'z-index: '+(5-index)+';left:'+(index*40)+'rpx;'" 
						:src="avatar+'?imageView2/1/w/100/h/100/q/50'" 
						type="user"
						fit="cover"
					></lazy-image>
				</view>
				<text class="participateNum">{{article.participateNum}}人已参与话题讨论</text>
			</view>
			<!-- 其他信息 -->
			<view class="foot-info text-info color-grey flex-r ac" v-if="showFoot">
				<template v-if="article.createTime">
					<uni-dateformat :date="article.createTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
					{{new Date() - new Date(article.createTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
				</template>
				<text class="views" v-if="type == 'recommend'">{{article.virtualReadNum || 0}}人查看</text>
			</view>
			<!-- 球吧信息 -->
			<view class="bar-info flex-r ac" :class="{'thinborder-top': type == 'readlog' || type == 'experthome'}" v-if="showBar">
				<!-- <view class="info-left flex-r ac" v-if="type != 'barhome' && article.forumId &&type!='ballbar'" @tap.stop="$CHS.goBarHome(article.forumId, article.blacklist)">
					<lazy-image class="bar-img border-round" :src="article.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
					<text class="text-info">{{article.forumName}}</text>
				</view>
				<view class="info-left flex-r ac" v-else-if="type != 'barhome' && article.forumId &&type==='ballbar'" @tap.stop="$CHS.goBarHome(article.forumId, article.blacklist)">
					<lazy-image class="bar-img ballbar-round" :src="article.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
					<text class="ballbar-info">{{article.forumName}}</text>
				</view> -->
				<view class="info-right flex-r ac">
					<image class="comment-icon"  v-if="type!='ballbar'" src="@/public/images/bar/comment.png" mode="aspectFit"></image>
					<image class="comment-icon-bar" v-else src="@/public/images/bar/ly.png" mode="aspectFit"></image>
					<text :class="type!='ballbar'?'text-small':'text-small-bar'">{{article.commentNum || 0}}</text>
					<image class="view-icon" v-if="type!='ballbar'" src="@/public/images/bar/views.png" mode="aspectFit"></image>
					<image class="view-icon-bar"  v-else src="@/public/images/bar/ll.png" mode="aspectFit"></image>
					<text :class="type!='ballbar'?'text-small':'text-small-bar'">{{article.virtualReadNum || 0}}</text>
				</view>
			</view>
			<!-- 优惠券活动 -->
			<view 
				class="activity-info flex-r ac jsb thinborder-top" 
				v-if="article.type == 1 && article.finish !== 1 && article.enablePay === 1 && article.label != '2' && user.couponActivity">
				<image class="icon-coupon" src="@/public/images/public/wzyh.png" mode="widthFix"></image>
				<view class="activity-bean flex-r ac">
					<text class="color-white text-info">5折价</text>
					<view class="bg-white color-red flex-r ac">
						<text class="text-small">{{ article.payBeanValue ? Math.ceil(article.payBeanValue * 0.5) : 0}}</text>
						<image class="icon-bean" src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<!-- <view class="result-icon" :class="type" v-if="article.matchInfoList && showResult && article.result">
				<image :src="require('@/public/images/article/res_'+article.result+(article.result == 1 ? '_'+article.matchInfoList.length : '')+'.png')" mode="aspectFit"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	/**
	 * ContentList 内容列表
	 * @description 内容列表用于展示话题晒单列表
	 * @property {Array} list 内容列表数组
	 * @property {String} type = [recommend|readlog|ballbar|barhome|experthome] 列表类型
	 *  @value recommend 料详情专家晒单列表
	 *  @value readlog 浏览记录列表
	 *  @value ballbar 球吧首页热帖列表
	 *  @value barhome 球吧主页内容列表
	 *  @value experthome 专家主页晒单列表
	 * @property {Boolean} showHead = [true|false] 是否展示头部专家信息
	 * @property {Boolean} showResult = [true|false] 是否展示结果
	 * @property {Boolean} showBar = [true|false] 是否展示球吧信息
	 * @property {Boolean} showFoot = [true|false] 是否展示其他信息
	 * @property {Boolean} marginTop = [true|false] 是否存在顶部距离
	 * @property {Boolean} marginBottom = [true|false] 是否存在底部距离
	 * @property {Boolean} radius = [true|false] 是否使用圆角
	 * @example <ContentList :list="list" type="readlog"></ContentList>
	 */
	export default {
		name:"ContentList",
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			type: {
				type: String,
				default: ''
			},
			showHead: {
				type: Boolean,
				default: true
			},
			showResult: {
				type: Boolean,
				default: false
			},
			showBar: {
				type: Boolean,
				default: true
			},
			showFoot: {
				type: Boolean,
				default: false
			},
			marginTop: {
				type: Boolean,
				default: true
			},
			marginBottom: {
				type: Boolean,
				default: true
			},
			radius: {
				type: Boolean,
				default: false
			},
			showSP:{
				type:Boolean,
				default:true,
			},
			showHot:{
				type:Boolean,
				default:true,
			}
		},
		data(){
			return {
				voteFlag:true
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			articleList() {
				return this.list	
			},
			isFullWidth() { //是否占满屏幕宽度
				if(this.type == 'ballbar' || this.type == 'barhome') {
					return true
				}else{
					return false
				}
			},
			video(){
				return this.$store.state.videoUrl
			},
		},
		components:{
			VideoUrl:()=>import("@/components/full-video/video-url.vue")
		},
		methods: {
			/**
			 * @description 进入详情
			 * @param {object} article - 方案数据对象
			 * @param {number} index - 索引
			 */
			goDetail(article, index) {
				console.log(article,index,'=======')
				if(article.blacklist === 1 && (article.userType != 'user' || article.userId != this.user.userId)){
					this.$ShowToast({text: '您已被拉入黑名单，不能访问当前内容', type: 2, time: 3})
					return
				}
				uni.$once('readNum', (data)=>{
					this.articleList[index].virtualReadNum = data.num
				})
				let params = {barId: article.forumId, barName: article.forumName, barLogo: article.logo, type: article.userType || 'expert'}
				console.log(params,'params')
				if(article.type == 1 || article.type == 99) {
					this.$CHS.goArticleDetail(article.id, params)
				}else if(article.type == 2){
					this.$CHS.goShareDetail(article.id, params)
				}else if(article.type == 6 || article.type == 7){
					this.$CHS.goDiscussDetail(article.id, params)
				}
			},
			/**
			 * @description 提交投票
			 * @param {object} article - 方案数据对象
			 * @param {number} index - 索引
			 */
			voteSubmit(article, index) {
				if(this.isSubmit){
					return
				}
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				let vote = article.discussOption
				let status = vote.every(item => !item.voteFlag)
				if(status){
					this.isSubmit = true
					this.$http.post({
						url: '/api/chtyForumDiscussRecord/add',
						data: {
							id: vote[index].id,
							status: 1
						}
					}).then(data => {
						console.log(data);
						if(data.success){
							this.$ShowToast({text: data.message || '投票成功', type: 1})
							article.participateNum = article.participateNum + 1
							vote[index].voteFlag = true
							vote[index].voteNum = Number(vote[index].voteNum) + 1
							this.voteFlag = false;
						}else{
							this.$ShowToast({text: data.message || '投票失败，请稍后重试', type: 2})
						}
					}).finally(()=>{
						this.isSubmit = false
					})
				}else{
					let params = {barId: article.forumId, barName: article.forumName, barLogo: article.logo, type: article.userType || 'expert'}
					this.$CHS.goDiscussDetail(article.id, params)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-list{
		.article-list-item{
			padding: 0 20rpx 20rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			position: relative;
			&.radius{
				border-radius: 10rpx;
			}
			.read-info{
				//box-shadow: 0 1rpx 0 0 #EDEDED;
				height: 80rpx;
				line-height: 80rpx;
			}
			.author{
				margin-top: 20rpx;
				.author-avatar{
					position: relative;
					height: 80rpx;
					border-radius: 50%;
					.avatar{
						width: 80rpx;
						height: 80rpx;
						border: 2rpx solid #FFF;
						box-sizing: border-box;
					}
					.label-icon{
						position: absolute;
						bottom: -10rpx;
						width: 64rpx;
						height: 24rpx
					}
					&.bz{
						border: 2rpx solid #F23030;
					}
					&.fb{
						border: 2rpx solid #4C88FF;
					}
					&.fxs{
						border: 2rpx solid #43BF85;
					}
					&.by{
						.avatar{
							border: none;
						}
					}
				}
				.author-info{
					flex: 2;
					margin-left: 20rpx;
					// .text-small{
					// 	width: 470rpx;
					// }
					.hot-icon{
						flex: 2;
						position: absolute;
						top: 38rpx;
						right: 20rpx;
						width: 140rpx;
						height: 48rpx;
					}
					.bean-icon{
						margin-left: 8rpx;
						width: 26rpx;
						height: 26rpx;
					}
					.right{
						z-index: 2;
						.color-grey{
							margin-left: 8rpx;
						}
						.price{
							margin-left: 20rpx;
						}
						.ml20{
							margin-left: 20rpx;
						}
					}
					.time{
						margin-top: 15rpx;
					}
				}
			}
			.title-info{
				margin-top: 15rpx;
				line-height: 40rpx;
				position: relative;
				.top, .type{
					margin-top: -4rpx;
					display: inline-block;
					padding: 6rpx 10rpx;
					border-radius: 4rpx;
					margin-right: 15rpx;
					font-weight: 500;
					line-height: 1;
					vertical-align: middle;
				}
				.type{
					&.bg-bule{
						background-color: #4C88FF;
					}
					&.bg-yellow{
						background-color: #FFC000;
					}
					&.bg-red{
						background-color: #FF4D4D;
					}
				}
				.top{
					background-color: #0055FF;
				}
				.article-title{
					z-index: 2;
					word-break: break-all;
					.text-primary{
						font-size: 34rpx;
						font-weight: 400;			
					}
					.text_shengl{
						font-size: 30rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.spfa{
						width: 112rpx;
						height: 32rpx;
						vertical-align: text-bottom;
						margin-top: -4rpx;
						margin-right: 20rpx;
						line-height: 42rpx;
					}
					.text-post{
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #3D5C99;
						margin-right: 6rpx;
						// vertical-align: middle;
					}
					.text-title{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
					}
				}
				.card-free{
					position: absolute;
					right: 0;
					width: 83rpx;
					height: 82rpx;
					z-index: 1;
				}
			}
			.article-image{
				flex-wrap: wrap;
				margin-top: 15rpx;
				.lazy-image{
					width: 218rpx;
					height: 164rpx;
					border-radius: 8rpx;
					margin-right: 8rpx; 
				}
				.lazy-image:nth-child(3){
					margin-right: 0;
				}
				&.more{
					justify-content: space-between;
					position: relative;
					.morenum{
						position: absolute;
						top: 0;
						right: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 218rpx;
						height: 164rpx;
						font-size: 40rpx;
						color: #FFFFFF;
						background-color: rgba(0, 0, 0, 0.4);
						border-radius: 8rpx;
					}
				}
				&.big-image{
					.lazy-image{
						width: 670rpx;
						height: 376rpx;
						border-radius: 10rpx;
						margin-right: 0;
					}
				}
				&.full-width{
					.lazy-image{
						width: 226rpx;
						height: 170rpx;
						margin-right: 16rpx; 
					}
					.lazy-image:nth-child(3){
						margin-right: 0;
					}
					&.more{
						.morenum{
							width: 226rpx;
							height: 170rpx;
						}
					}
					&.big-image{
						.lazy-image{
							width: 710rpx;
							height: 400rpx;
							margin-right: 0;
						}
					}
				}
				&.video-box{
					position: relative;
					.thumb-img{
						background: #1F2633;
					}
					.playIcon{
						position: absolute;
						width: 100rpx;
						height: 100rpx;
					}
					.play-spt{
						position: absolute;
						top: 10rpx;
						left: 10rpx;
						width: 80rpx;
						height: 32rpx;
					}
				}
				
			}
			.match-info{
				margin-top: 10rpx;
				.color-blue{
					margin-right: 10rpx;
				}
			}
			.vote-info{
				margin-top: 5rpx;
				.vote-other{
					.vote-item{
						margin-top: 20rpx;
						width: 100%;
						height: 80rpx;
						background: #FFFFFF;
						border: 1rpx solid #0055FF;
						border-radius: 10rpx;
						box-sizing: border-box;
						padding: 0 40rpx;
						position: relative;
						overflow: hidden;
						color: #0055FF;
						&:first-child{
							margin-top: 10rpx;
						}
						.progress{
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							background: #E5EFFF;
							z-index: 1;
						}
						text{
							z-index: 2;
						}
						&.active {
							color: #0055FF;
							border: 1rpx solid #0055FF;
						
							.progress {
								background: #D9E5FF;
							}
						}
						
						&.noActive {
							color: #333333;
							border: 1rpx solid #B3B3B3;
							.progress {
								background: #E6E6E6;
							}
						}
						.text-hidden{
							max-width: 550rpx;
						}
					}
				}
				/*
				.vote-two{
					position: relative;
					margin-top: 10rpx;
					height: 80rpx;
					.vote-item{
						position: absolute;
						width: 360rpx;
						height: 80rpx;
						padding: 0 10rpx 0 15rpx;
						box-sizing: border-box;
						background-color: transparent;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						&.active{
							color: #0055FF;
						}
						&.small{
							width: 340rpx;
						}
						.text-hidden{
							max-width: 280rpx;
							margin-right: 20rpx;
						}
					}
					.vote-item:first-child{
						left: 0;
						background-position: top left;
						background-image: url("~@/public/images/bar/tp2_z.png");
					}
					.vote-item:last-child{
						right: 0;
						background-position: top right;
						background-image: url("~@/public/images/bar/tp2_y.png");
					}
					.vote-item.active:first-child{
						background-image: url("~@/public/images/bar/tp_zxz.png");
					}
					.vote-item.active:last-child{
						background-image: url("~@/public/images/bar/tp_yxz.png");
					}
				}
				.vote-other{
					.vote-item{
						margin-top: 10rpx;
						width: 100%;
						height: 80rpx;
						background: #FFFFFF;
						border: 1rpx solid #999999;
						border-radius: 40rpx;
						box-sizing: border-box;
						padding: 0 40rpx;
						&.active{
							background: #E5EEFF;
							border: 1rpx solid #0055FF;
							color: #0055FF;
						}
						.text-hidden{
							max-width: 550rpx;
						}
					}
				}
				*/
			}
			.join-info{
				margin-top: 15rpx;
				height: 80rpx;
				background: #F2F5FA;
				border-radius: 10rpx;
				.join-user{
					flex: 2;
					position: relative;
					height: 64rpx;
					margin-left: 20rpx;
					.user-avatar{
						width: 64rpx;
						height: 64rpx;
						border: 4rpx solid #FFFFFF;
						box-sizing: border-box;
						position: absolute;
					}
				}
				.color-red{
					margin-right: 10rpx;
				}
				.participateNum{
					margin-right: 18rpx;
					font-size: 24rpx;
					color: #999999;
					
				}
			}
			.bar-info{
				margin-top: 30rpx;
				.info-left{
					flex: 1;
					justify-content: flex-start;
					.bar-img{
						margin-right: 20rpx;
						width: 48rpx;
						height: 48rpx;
						background: #F2F2F2;
					}
					.ballbar-round{
						width: 40rpx;
						height: 40rpx;
						border-radius: 4rpx;
					}
					.ballbar-info{
						font-size: 22rpx;
						margin-left: -20rpx;
						padding: 9rpx 15rpx;
						background: #F2F2F2;
						text-align: center;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
					}
					.text-secondary{
						flex: 2;
					}
				}
				.info-right{
					flex: 2;
					justify-content: flex-end;
					.comment-icon, .view-icon{
						margin-right: 20rpx;
						width: 32rpx;
						height: 32rpx;
					}
					.comment-icon-bar, .view-icon-bar{
						margin-right: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
					.view-icon,.view-icon-bar{
						margin-left: 40rpx;
					}
					.text-small-bar{
						color: #666666;
					}
				}
				&.thinborder-top{
					margin-top: 20rpx;
					padding-top: 16rpx;
				}
			}
			.foot-info{
				margin-top: 15rpx;
				.views{
					margin-left: 20rpx;
				}
			}
			.result-icon{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				&.readlog{
					top: 80rpx;
				}
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
			.activity-info{
				margin-top: 20rpx;
				padding-top: 10rpx;
				margin-bottom: -10rpx;
				//border-top: 1rpx solid #ededed;
				.icon-coupon{
					width: 292rpx;
					// margin-left: -20rpx;
				}
				.activity-bean{
					height: 40rpx;
					border-radius: 4rpx;
					background-color: #F23030;
					.color-white{
						margin: 0 13rpx;
					}
					.bg-white{
						height: 36rpx;
						margin-right: 2rpx;
						border-radius: 0 4rpx 4rpx 0;
						background-color: #FFFFFF;
						.text-small{
							margin-left: 15rpx;
						}
						.icon-bean{
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
							margin-right: 15rpx;
						}
					}
				}
			}
		}
		.article-list-item:last-child{
			margin-bottom: 20rpx;
		}
		&.border{
			.article-list-item{
				border-bottom: 1rpx solid #EDEDED;;
			}
			.article-list-item:last-child{
				border: none;
			}
		}
	}
</style>
